<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>学生成绩</title>

  <!--dynamic table-->
  <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet" />
  <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet" />

  <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                学生管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">学生管理</a>
                </li>
                <li class="active">学生成绩表</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
        <div class="row">
        <div class="col-sm-12">
        <header class="panel-heading">
            学生成绩表
        </header>
        <div class="panel-body">
        <div class="adv-table">
            <!-- 添加按钮 -->
            <button id="score_add_btn" type="button" class="btn btn-success" data-toggle="modal" data-target="#score_add_modal">
                添加记录
            </button>
            <button class="btn btn-danger" id="delete_all" th:pn="${page.current}">批量删除</button>
        <table  class="display table table-bordered table-striped">
        <thead>
        <tr>
            <th style="text-align: center" width="20px">
                <input type="checkbox" id="check_all"/>
            </th>
            <th style="text-align: center">学期</th>
            <th style="text-align: center">学号</th>
            <th style="text-align: center">课程名称</th>
            <th style="text-align: center">姓名</th>
            <th style="text-align: center">分数</th>
            <th style="text-align: center">发布时间</th>
            <th style="text-align: center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="score,stat:${scores}">
            <td style="text-align: center"><input type='checkbox' class='check_item'/></td>
            <td style="text-align: center" th:text="${score?.getSTerm()==1 ? '上学期':'下学期'}" th:sTerm="${score?.getSTerm()}"></td>
            <td style="text-align: center" th:text="${score?.getSId()}"></td>
            <td style="text-align: center" th:text="${score?.getCName()}"></td>
            <td style="text-align: center" th:text="${score?.getSName()}"></td>
            <td style="text-align: center" th:text="${score?.getScore()}"></td>
            <td style="text-align: center" th:text="${#dates.format(score.getSDate(),'yyyy-MM-dd')}"></td>
            <td style="text-align: center;" class="center hidden-phone">
                <button type="button" class="btn btn-info update_btn" data-toggle="modal"
                        data-target="#score_update_modal">修改</button>
            </td>
        </tr>
        </tbody>
        </table>
            <!-- 导航条 -->
            <div class="row-fluid">
                <div class="dataTables_info">
                    当前第[[${page.current}]]页,
                    共[[${page.pages}]]页,
                    共[[${page.total}]]条数据
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <!-- 上一页 -->
                        <li th:if="${page.current > 1}" th:class="prev"><a
                                th:href="@{'/student_score?pn='+ ${page.current - 1}}">上一页</a></li>
                        <li th:if="${page.current <= 1}" th:class="disabled"><span>上一页</span></li>
                        <!-- 不足5页 -->
                        <li th:if="${page.pages <= 5}" th:class="${page.current == num ? 'active':''}"
                            th:each="num : ${#numbers.sequence(1,page.pages)}">
                            <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                            <a th:if="${page.current != num}" th:href="@{'/student_score?pn='+${num}}">[[${num}]]</a>
                        </li>
                        <!-- 够5页 -->
                        <div th:if="${page.pages > 5}">
                            <!-- 前5页 -->
                            <li th:if="${page.current < 3}"
                                th:class="${page.current == num ? 'active':''}"
                                th:each="num : ${#numbers.sequence(1,5)}">
                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                <a th:if="${page.current != num}" th:href="@{'/student_score?pn='+${num}}">[[${num}]]</a>
                            </li>
                            <!-- 中间页码 -->
                            <li th:if="${page.current >= page.pages - 2 and page.current <= page.pages}"
                                th:class="${page.current == num ? 'active':''}"
                                th:each="num : ${#numbers.sequence(page.pages - 4,page.pages)}">
                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                <a th:if="${page.current != num}" th:href="@{'/student_score?pn='+${num}}">[[${num}]]</a>
                            </li>
                            <!-- 最后5页 -->
                            <li th:if="${page.current > 2 and page.current < page.pages - 2}"
                                th:class="${page.current == num ? 'active':''}"
                                th:each="num : ${#numbers.sequence((page.current)-2,(page.current)+2)}">
                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                <a th:if="${page.current != num}" th:href="@{'/student_score?pn='+${num}}">[[${num}]]</a>
                            </li>
                        </div>
                        <!-- 下一页 -->
                        <li th:if="${page.current < page.pages}" th:class="next"><a
                                th:href="@{'/student_score?pn='+ ${page.current + 1}}">下一页</a></li>
                        <li th:if="${page.current >= page.pages}" th:class="disabled"><span>下一页</span>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 添加模态框 -->
<div class="modal fade" id="score_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="score_add_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">成绩添加</h4>
            </div>

            <div class="modal-body">
                <form id="student_score_add_form" class="form-horizontal" th:action="@{/student_score}" method="post">

                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*学期</label>
                        <div class="col-sm-10">
                            <select name="sTerm">
                                <option name="sTerm1" value="1">上学期</option>
                                <option name="sTerm2" value="2">下学期</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sId_add_form"
                               class="col-sm-2 control-label">*学号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sId"
                                   id="sId_add_form" placeholder="学号" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sName_add_form"
                               class="col-sm-2 control-label">*学生姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sName"
                                   id="sName_add_form" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*课程名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_add_form" placeholder="课程名称" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="score_add_form"
                               class="col-sm-2 control-label">分数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="score_add_form"
                                   name="score"
                                   placeholder="分数" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.current}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="score_add_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="score_add_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="score_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="score_update_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">成绩添加</h4>
            </div>

            <div class="modal-body">
                <form id="student_score_update_form" class="form-horizontal" th:action="@{/updateScore}" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*学期</label>
                        <div class="col-sm-10">
                            <select name="sTerm">
                                <option id="sTerm1_update" value="1">上学期</option>
                                <option id="sTerm2_update" value="2">下学期</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sId_update_form"
                               class="col-sm-2 control-label">*学号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sId"
                                   id="sId_update_form" placeholder="学号" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sName_update_form"
                               class="col-sm-2 control-label">*学生姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sName"
                                   id="sName_update_form" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cName_update_form"
                               class="col-sm-2 control-label">*课程名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_update_form" placeholder="课程名称" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="score_update_form"
                               class="col-sm-2 control-label">分数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="score_update_form"
                                   name="score"
                                   placeholder="分数" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.current}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="score_update_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="score_update_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>
<form style="display: none" method="post" id="form_delete" th:action="@{/deleteScore}">
    <input type="hidden" name="sIds" id="sIds_delete">
    <input type="hidden" name="cNames" id="cNames_delete">
    <input type="hidden" name="sTerms" id="sTerms_delete">
    <input type="hidden" name="pn" id="pn_delete">
    <input type="hidden" name="_method" value="DELETE">
</form>
<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {

        // 点击 确定添加按钮
        $("#score_add_enter").click(function () {
            let sId = $("#sId_add_form").val().trim();
            let sName = $("#sName_add_form").val().trim();
            let cName = $("#cName_add_form").val().trim();
            let score = $("#score_add_form").val().trim();
            if (cName === "" || sId === "" || sName ==="" || score === "") {
                alert("请确保*号信息都填写")
                return false;
            }
            document.getElementById("student_score_add_form").submit();
        });

        // 取消添加
        $("#score_add_cancel").click(function () {
            $("#course_add_form")[0].reset();
        });

        // 取消修改
        $("#score_update_cancel").click(function () {
            $("#course_update_form")[0].reset();
        });

        // 关闭添加 模态框
        $("#score_add_modal_close").click(function () {
            $("#course_add_form")[0].reset();
        });

        // 关闭 修改 模态框
        $("#score_update_modal_close").click(function () {
            $("#course_update_modal")[0].reset();
        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {

            let sTerm = $(this).parents("tr").find("td:eq(1)").attr("sTerm");
            let sId = $(this).parents("tr").find("td:eq(2)").text();
            let cName = $(this).parents("tr").find("td:eq(3)").text();
            let sName = $(this).parents("tr").find("td:eq(4)").text();
            let score = $(this).parents("tr").find("td:eq(5)").text();

            $("#cName_update_form").val(cName);
            $("#sId_update_form").val(sId);
            $("#sName_update_form").val(sName);
            $("#score_update_form").val(score);

            if(sTerm !== 1) {
                $("#sTerm2_update").prop("selected", "selected");
            } else {
                $("#sTerm2_update").prop("selected", "selected");
            }

        });

        // 点击确定修改按钮
        $("#score_update_enter").click(function () {
            $("#student_score_update_form").submit();
        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });

        // 实现批量删除
        $("#delete_all").click(function () {
            let sIds = "";
            let cNames = "";
            let sTerms = ""

            $.each($(".check_item:checked"), function () {
                sIds += $(this).parents("tr").find("td:eq(2)").text() + "-";
                cNames += $(this).parents("tr").find("td:eq(3)").text() + "-";
                sTerms += $(this).parents("tr").find("td:eq(1)").attr("sTerm") + "-";
            });
            sIds = sIds.substring(0, sIds.length - 1);
            cNames = cNames.substring(0, cNames.length - 1);
            sTerms = sTerms.substring(0, sTerms.length - 1);
            let pn = $("#delete_all").attr("pn");
            $("#sIds_delete").val(sIds);
            $("#cNames_delete").val(cNames);
            $("#sTerms_delete").val(sTerms);
            $("#pn_delete").val(pn);
            if (confirm("你确定要删除吗?")) {
               $("#form_delete").submit();

            }
        });
        //
        // 全选 按钮 和 单个 按钮的关系
        $(document).on("click", ".check_item", function () {
            let len = $(".check_item:checked").length;
            let flag = len === $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

    });
</script>

</body>
</html>
